<template>
  <div class="the-tool-card-panel">
    <!-- <div class="text-left q-mb-lg search-bar q-my-lg" style="z-index: 99;"> -->
    <div class="row search-bar-input q-py-md" style="border-radius: 2px;">
      <q-card v-if="$route.query.name" class="cursor-pointer col">
        <q-card-section>
          <!-- 专题跳转过来显示 -->
          <div class="text-h6">专题：{{ $route.query.name }}</div>
        </q-card-section>
      </q-card>
      <q-input dense v-if="!$route.query.name" v-model="keywords" class="col-4"
               label="搜索应用"
               @keydown.enter="handleSearch">
        <template v-slot:prepend>
          <q-btn round dense flat icon="search" class="q-mr-sm" @click="handleSearch"/>
        </template>
      </q-input>
      <q-btn-group v-if="!$route.query.name" class="col-8" spread unelevated style="color:#424242">
        <q-btn label="点赞最多" size="md" icon="thumb_up_off_alt" @click="handleSort('likeMost')"/>
        <q-btn label="查看最多" size="md" icon="visibility" @click="handleSort('viewMost')"/>
        <!-- <q-btn label="Third" icon="update" class="col"/> -->
      </q-btn-group>
    </div>
    <!-- </div> -->
    <q-separator></q-separator>
    <q-intersection
        v-for="item in $store.state.tool.tool.list"
        :key="item['_id']"
        style="height: 150px;"
        once
    >
      <tool-card :data="item"></tool-card>
      <q-separator></q-separator>
    </q-intersection>
  </div>
</template>

<script lang="ts">
import ToolCard from '../../components/tool/ToolCard.vue'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ToolCardPanel',
  components: {
    ToolCard
  },
  data () {
    return {
      // keywords: this.$route.query.keywords || '',
      // sorts: this.$route.query.sorts || ''
      keywords: '',
      sorts: ''
    }
  },
  watch: {
    // async $route(to) {
    //   if (to.name === 'AppIndex') {
    //     this.keywords = this.$route.query.keywords
    //     await this.initCardList()
    //   }
    // }
  },
  async mounted () {
    await this.$store.dispatch('initUserInfo')
    await this.initCardList()
  },
  methods: {
    async initCardList () {
      const route = this.$route
      if (this.$route.params.index === 'topic') {
        return
      }
      if (route.params.index === 'my-collection') {
        this.keywords = '我的收藏'
      }
      if (route.params.index === 'my-like') {
        this.keywords = '我的点赞'
      }
      await this.handleSearch()
    },
    async handleSearch () {
      if (this.keywords === '我的收藏') {
        return await this.handleShowCollection()
      }
      if (this.keywords === '我的点赞') {
        return await this.handleShowLike()
      }
      // console.log(this.$route.params.index)
      // console.log(this.keywords)
      // console.log(this.$route.query.keywords)
      // console.log(this.sorts)
      // console.log(this.$route.query.sorts)
      if (
          (this.keywords !== this.$route.query.keywords) ||
          (this.sorts !== this.$route.query.sorts)) {
        // console.log('new query')
        return await this.$router.push({
          name: 'AppIndex',
          params: { index: 'search' },
          query: {
            keywords: this.keywords,
            sorts: this.sorts
          }
        })
      }
    },
    async handleSort (sort: string) {
      // let query = this.$route.query
      // if (query === undefined) query = {}
      if (sort === 'likeMost') {
        this.sorts = '{ "statistics.likeCount": -1 }'
      } else if (sort === 'viewMost') {
        this.sorts = '{ "statistics.showCount": -1 }'
      }
      await this.handleSearch()
      // console.log(query)
      // console.log(this.$route.path)
      // return await this.$router.push({path: this.$route.path, query: query})
    },
    async handleShowLike () {
      this.keywords = '我的点赞'
      await this.$store.dispatch('tool/initUserTool', this.$store.state.userInfo.toolLike)
    },
    async handleShowCollection () {
      this.keywords = '我的收藏'
      await this.$store.dispatch('tool/initUserTool', this.$store.state.userInfo.toolCollection)
    }
  }
})
</script>

<style lang='scss'>
.the-tool-card-panel {
  background-color: $bg2;
}
</style>
